<template>
  <div class="background">
    <div ref="vantaRef" style="width: 100%; height: 100%"></div>
    <div class="g-glossy inputBox">
      <transition name="fade-slide">
        <!-- 登录界面 -->
        <div class="loginBox" v-if="iflogin" key="login">
          <h2>Login</h2>
          <el-form ref="ruleFormRef" :model="loginform" :rules="rules">
            <el-form-item prop="userName">
              <el-input
                v-model="loginform.userName"
                class="input"
                placeholder="Username"
                autofocus
              >
                <template #prefix>
                  <el-icon style="color: aliceblue"> <User /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item prop="password">
              <el-input
                v-model="loginform.password"
                type="password"
                class="input"
                placeholder="Password"
                show-password
              >
                <template #prefix>
                  <el-icon style="color: aliceblue"><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
          <div class="buttonGroup">
            <button class="loginbutton" @click="loginSubmit()">
              <span>登录</span>
            </button>
            <el-button
              style="color: #ffffffb4; cursor: pointer"
              link
              @click="changeSign"
              >注册</el-button
            >
          </div>
        </div>
      </transition>

      <transition name="fade-slide">
        <!-- 注册界面 -->
        <div class="signBox" v-if="!iflogin" key="sign">
          <h2>Sign</h2>
          <el-form ref="ruleSignFormRef" :model="signform" :rules="signRules">
            <el-form-item prop="userName">
              <el-input
                v-model="signform.userName"
                class="input signinput"
                placeholder="Username"
                autofocus
              >
                <template #prefix>
                  <el-icon style="color: aliceblue"> <User /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item prop="password">
              <el-input
                v-model="signform.password"
                type="password"
                class="input signinput"
                placeholder="Password"
                show-password
              >
                <template #prefix>
                  <el-icon style="color: aliceblue"><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="passwordAgin">
              <el-input
                v-model="signform.passwordAgin"
                type="password"
                class="input signinput"
                placeholder="Password-agin"
                show-password
              >
                <template #prefix>
                  <el-icon style="color: aliceblue"><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
          <div
            class="buttonGroup"
            style="display: flex; justify-content: center"
          >
            <button class="signbutton loginbutton" @click="onSign(signform)">
              <span>注册</span>
            </button>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script setup>
import * as THREE from 'three'
import NET from 'vanta/src/vanta.net'
import { onMounted, onBeforeUnmount, ref } from 'vue'
import { Lock, User } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const iflogin = ref(true)
const ruleFormRef = ref(null)
const ruleSignFormRef = ref(null)
const loginform = ref({
  userName: '',
  password: '',
})

const rules = {
  userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      min: 5,
      max: 12,
      message: '密码长度应长于五个字符',
      trigger: 'blur',
    },
  ],
}
const signform = ref({
  userName: '',
  password: '',
  passwordAgin: '',
})
const checkPassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== signform.value.password) {
    callback(new Error('两次密码不一致！'))
  } else {
    callback()
  }
}
const signRules = {
  userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      min: 5,
      max: 12,
      message: '密码长度应长于五个字符',
      trigger: 'blur',
    },
  ],
  passwordAgin: [
    // { required: true, message: '请再次输入密码', trigger: 'blur' },
    { required: true, validator: checkPassword, trigger: 'blur' },
  ],
}
const vantaRef = ref(null) // 创建一个 ref 引用 DOM 元素
let vantaEffect = null // 声明 vantaEffect 变量
const loginSubmit = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
    }
  })
}
const onSign = () => {
  ruleSignFormRef.value.validate((valid) => {
    if (valid) {
      console.log('sign!')
      ElMessageBox.confirm('注册成功！回到登陆界面吗?', '提示', {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'info',
      })
        .then(() => {
          // ElMessage({
          //   type: 'success',
          //   message: 'Delete completed',
          // })
          iflogin.value = true
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: 'continue',
          })
        })

      signform.value.userName = ''
      signform.value.password = ''
      signform.value.passwordAgin = ''
    } else {
      console.log('error ssign!')
    }
  })
}
const changeSign = () => {
  iflogin.value = false
}
onMounted(() => {
  if (vantaRef.value) {
    // 确保 DOM 元素已挂载
    vantaEffect = NET({
      el: vantaRef.value, // 使用 vantaRef.value 来访问 DOM 元素
      THREE: THREE,
    })

    vantaEffect.setOptions({
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      scale: 1.0,
      scaleMobile: 1.0,
      color: 0xfbfbfb,
      backgroundColor: 0x100235,
      points: 17.0,
      maxDistance: 23.0,
      spacing: 17.0,
    })
  }
})

onBeforeUnmount(() => {
  if (vantaEffect) {
    vantaEffect.destroy() // 组件销毁时清理效果
  }
})
</script>

<style scoped>
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.3s ease-in;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateY(60px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateY(-60px);
}

h2 {
  color: #e9e9e9;
  font-size: 25px;
}
.background {
  height: 98vh;
  width: 98vw;
  display: flex;
  align-items: center;
}
.input {
  width: 350px;
  position: relative;
  border-radius: 20px;
  color: #ffffff;

  margin: 20px 0;
}
.signinput {
  margin: 10px 0;
}
::v-deep .input .el-input__inner::placeholder {
  color: rgba(255, 255, 255, 0.589) af;
  font-weight: 50;
}
::v-deep .input .el-input__inner {
  color: #fff;
  font-weight: 50;
}
/* 谷歌 */
::v-deep .ffffffaf .el-input__inner::-webkit-input-placeholder {
  color: #fff;
  font-weight: 50;
}
/* 火狐 */
::v-deep .input .el-input__inner:-moz-placeholder {
  color: #ffffffaf;
  font-weight: 50;
}

::v-deep .input .el-input__wrapper {
  width: 100%;
  height: 45px;
  border-radius: 20px;
  background-color: #f1f1f123;
  text-align: center;
  border-color: #c0c4cc;
  color: #ffffff !important;
}
.inputBox {
  position: absolute;
  background-color: aliceblue;
  padding: 20px;
  right: 0;
  margin-right: 8%;
  border-radius: 20px;
  display: flex;
  flex-grow: 0;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
}
.g-glossy {
  width: 450px;
  height: 450px;
  background: inherit;
  overflow: hidden;
  position: absolute;
  right: 3%;
  box-shadow: rgba(255, 255, 255, 0.418) 0px 48px 100px 0px;
  background: linear-gradient(to bottom, #ffffff1c, rgba(255, 255, 255, 0.329));
  background-color: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(10px);
  z-index: 10;
}
@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }
  10%,
  20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%,
  50%,
  70%,
  90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%,
  60%,
  80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.signbutton {
  margin-left: 50px;
}
.loginbutton {
  margin-right: 50px;
  margin-top: 50px;
  font-size: 20px;
  height: 45px;
  width: 110px;
  border: 1px solid #ffffffb4;
  background-color: #f7f7f731;
  color: #ffffffb4;
  border-radius: 10px;
  animation: tada 1s;
}
.loginbutton:hover {
  border: 1px solid #ffffff;
  color: #ffffff;
  animation: tada 1s;
}
.loginbutton:active {
  animation: none;
}
.loginbutton span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.loginbutton span::after {
  content: '>';
  margin-top: 3px;
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.loginbutton:hover span {
  padding-right: 30px;
}
.loginbutton:hover span::after {
  opacity: 1;
  right: 0;
}
</style>
